<template>
  <div style="background-color: white;">
    <van-nav-bar
      title="厂家列表"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <div>
      <van-search
        label="厂家"
        v-model="name"
        shape="round"
        background="#ffffff"
        placeholder="请输入商品关键字或厂家名称搜索"
        @search="onSearch"
      />
    </div>
    <div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div v-for="item in companyList" :key="item.companyId" @click="goCompanyInfo(item.companyId)">
          <div class="rower">
            <div class="columner">
              <div class="cjname">{{item.name}}</div>
              <div class="gsjjcss" v-html="item.introduction != null ? item.introduction.substring(0,43)+'....':''">
              </div>
            </div>
            <img  :src="item.logo" class="gg_img" />

          </div>
          <hr class="line" />
        </div>

      </van-list>
    </div>
  </div>
</template>

<script>
import { getCompanyInfo, queryProductCategory, queryProductInfo, saveAgencyChat, queryCompanylist } from '../../api/api'
import AreaList from '../../../static/area'
import { Dialog } from 'vant'
import { Toast } from 'vant'
export default {
  name: 'Company',
  data() {
    return {
      companyList: [],
      loading: false,
      finished: false,
      name: ''
    }
  },
  created() {
    this.queryCompanylist()
  },
  methods: {
    onLoad() {
    },

    onClickLeft() {
      this.$router.go(-1) // 返回上一层
    },

    queryCompanylist() {
      const param = {}
      queryCompanylist(param).then(response => {
        console.log(response.data)
        this.companyList = response.rows
        console.log('公司列表')
        console.log(this.companyList)
        this.loading = true
        this.finished = true
      })
    },

    goCompanyInfo(companyId) {
      this.$router.push({ path: '/company', query: { companyId: companyId }})
    },

    onSearch() {
      var name = this.name
      const param = { name: name }
      queryCompanylist(param).then(response => {
        console.log(response.data)
        this.companyList = response.rows
        console.log('公司列表')
        console.log(this.companyList)
        this.loading = true
        this.finished = true
      })
    }
  }
}
</script>

<style scoped>
  .rower{
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    height: 100px;
    background-color: white;
    width: 100%;
  }
  .gg_img{
    border-radius: 10px;
    height: 80px;
    position: absolute;
    right: 20px;
    width: 30%;
  }

  .columner{
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    width: 60%;
    padding-left: 10px;
    padding-right: 10px;
  }

  .gsjjcss{
    padding-left: 10px;
    padding-top: 5px;
    font-size: 14px;
    color: #B2B2B2;
  }

  .cjname{
    padding-left: 10px;
    font-size: 14px;
    font-weight: bold;
  }
  .line{
    width: 100%;
    margin: 0 auto;
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 10px;
  }
</style>
